Styling Your First Web Page with CSS

Difficulty: Easy

Posted: Jan 13th, 2025 | By the 404Found Team

In this tutorial, we'll learn how to use CSS (Cascading Style Sheets) to add color, fonts, and layout styles to your HTML page. CSS is used to make web pages look more appealing by adding styling to the elements created with HTML.

What You’ll Learn:

How to link a CSS file to your HTML page.
How to apply styles to different HTML elements.
How to use basic CSS properties such as color, padding, margin, and font styles.

Step 1: Setting Up Your CSS File

To begin, you’ll need to create a CSS file. Open your text editor and create a new file. Save it as style.css.

Step 2: Linking the CSS File to Your HTML

To apply the styles, link the CSS file to your HTML document. You can do this by adding the following <link> tag in the <head> section of your HTML file:

HTML Example

<link rel="stylesheet" href="style.css">

Step 3: Adding Styles in the CSS File

Now, open the style.css file you created and add some simple styles to your page. For example, to change the background color, text color, and font size, you can add the following CSS code:

CSS Example

body {
background-color: #f4f4f4;
color: #333;
font-family: Arial, sans-serif;
}

h1 {
color: #0073e6;
text-align: center;
}

In the example above, we set a light gray background color for the page, changed the text color to dark gray, and made the main heading <h1> blue and centered it.

Step 4: Viewing Your Styled Web Page

After saving the style.css file, return to your HTML page. Make sure the <link> tag is correctly added in the <head> section. Now, refresh the page in your web browser, and you should see the styles applied to your web page.

Step 5: More Styling Examples

Here are a few more styling examples you can try:

CSS Example

p {
font-size: 18px;
line-height: 1.6;
}

a {
color: #0073e6;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

In this example, we’ve added a font size and line height to paragraphs (<p>), styled links (<a>) with a blue color and no underline, and added an effect for when the link is hovered over.

Step 6: Full Example

Here’s a full example of how your HTML and CSS might look together:

HTML Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Styled Web Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Welcome to My Styled Web Page!</h1>
<p>This page has been styled using CSS to make it more visually appealing.</p>
<a href="https://www.example.com" target="_blank">Visit Example</a>
</body>
</html>

CSS Example

body {
background-color: #f4f4f4;
color: #333;
font-family: Arial, sans-serif;
}

h1 {
color: #0073e6;
text-align: center;
}

p {
font-size: 18px;
line-height: 1.6;
}

a {
color: #0073e6;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

Step 7: Next Steps

Now that you've styled your first web page, here are some things to try next:

Experiment with different CSS properties like margins, padding, and borders.
Learn about CSS selectors and how to target specific elements.
Explore CSS frameworks like Bootstrap to make styling easier and faster.

Next, check out are JavaScript tutorial! Learning JavaScript for Beginners

Happy styling!

404Found Team

Posted: Jan 14th, 2025

At 404Found, we are committed to providing high-quality content that keeps you well-informed in the fast-paced and constantly evolving world of technology. Our goal is to ensure you stay up-to-date with the latest trends, innovations, and insights that shape the tech landscape.

SubReddit Discord